<!--  -->
<template>
  <div id="answer" class="background" >
    <div class="flex-container1">
      <div class="flex-item1">
          <img class="imge" :src="userInfo.avatarUrl">
          <div class="font">{{userInfo.nickName}}</div>
      </div>
      <div class="flex-item11"></div>
      <div class="flex-item111">
        <img class="imge" :src="rivalInfo.avatarUrl">
        <div class="font">{{rivalInfo.nickName}}</div>
      </div>
    </div>
    <div class="flex-container2">
      <div class="flex-item2">
        <div class="font1">{{score}}</div>
      </div>
        <canvas class="cir" style=' width:20%; height:11%;' canvas-id="canvasArc"></canvas>
        <view class="centerWord">{{count}}</view>
        <div class="flex-item3">
          <div class="font1">{{rivalScore}}</div>
        </div>
    </div>
  
    <div class="flex-container3">
      <article :key="title" class="label animated lightSpeedIn">
        {{title}}
      </article>
    </div>
    <div class="flex-container4">     
      <div v-for="(item,i) in option" :key="item">              
        <button @click="choseAnswer(i)"  :class= "{'animated bounceOutDown':!subjectIn,'animated bounceInUp':subjectIn,btn:true, btnerror:(correctIndex!=i)&&(correctIndex!=-2)&&((chosen==i)||(rivalChosen==i)),btncorrect:(correctIndex==i)}">         
          <img v-show="(chosen==i)&&stop" class="player1img animated fadeIn" :src="userInfo.avatarUrl">
          <p class="answer">{{option[i]}}</p>
          <img v-show="(rivalChosen==i)&&stop" class="player2img animated fadeIn" :src="rivalInfo.avatarUrl">
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import store from '../utils/store'
import httpkit from '../utils/http-kit'
export default {
  name: 'answer',
  data () {
    return {
      option: ['', '', '', ''],
      title: '',
      stop: true,
      chosen: -1,
      intervalid: null,
      count: 10,
      score: 0,
      rivalScore: 0,
      rivalChosen: -1,
      index: 0,
      isclick: false,
      client: {},
      correctIndex: -2,
      rivalInfo: store.state.rivalInfo,
      userInfo: store.state.userInfo,
      timer: null,
      subjectIn: true,
      next: false
    }
  },

  onLoad () {
    Object.assign(this.$data, this.$options.data())
    httpkit.get('/match/ready', {
      id: store.state.userid,
      roomId: store.state.roomid
    }).then(res => {
      console.log('我方已准备')
    })
  },
  mounted () {
    var _this = this
    if (store.state.roomMessage != null) { // 重连信息 todo分数等
      this.rivalInfo = store.state.roomMessage.userInfo
    }
    if (store.state.subject != null) {
      _this.chosen = -1
      _this.rivalChosen = -1
      _this.correctIndex = -2
      _this.stopanswer()
      _this.subjectIn = false
      _this.option = store.state.subject.option
      _this.subjectIn = true
      _this.title = store.state.subject.title
      _this.startAnswer()
    }
    var client = store.state.client

    client.on('message', function (topic, message) {
      var jsMsg = JSON.parse(message)
      switch (jsMsg.type) { // 对相应的消息进行处理
        case 'subject': { // 处理题目消息
          _this.chosen = -1
          _this.rivalChosen = -1
          _this.correctIndex = -2
          _this.stopanswer()
          _this.subjectIn = false
          _this.option = jsMsg.option
          _this.subjectIn = true
          _this.title = jsMsg.title
          _this.startAnswer()
          break
        }
        case 'FriendsApply': { // 处理好友申请
          store.commit('addFriendsApply', jsMsg)
          break
        }
        case 'AnswerNotice': { // 处理对方答题
          _this.rivalScore = jsMsg.totalScore
          _this.rivalChosen = jsMsg.choice - 1
          break
        }
        case 'FinalResult' : { // 处理答题结算
          store.commit('changeResult', jsMsg)
          store.commit('changeResultScore', _this.score)
          console.log(_this.score)
          wx.redirectTo({
            url: '../settlement/main'
          })
          break
        }
      }
    })
  },
  components: {},
  methods: {
    // 开始答题
    startAnswer () {
      this.stop = false
      this.count = 10
      this.startCount()
      this.intervalid = setInterval(() => {
        if (this.count > 1) {
          this.count--
        } else {
          this.stopanswer()
        }
      }, 1000)
    },
    // 玩家选择选项
    choseAnswer (index) {
      if (!this.stop) {
        var _this = this
        _this.chosen = index
        this.stopanswer()
        httpkit.get('/match/answer', {
          id: store.state.userid,
          roomId: store.state.roomid,
          choice: parseInt(index) + 1,
          time: 10 - this.count
        }).then(res => {
          _this.correctIndex = res.data.rightAnswer - 1
          if (res.data.score !== 0) {
            _this.score = res.data.totalScore
            console.log('答对了')
          } else {
            console.log('答错了')
          }
        })
        this.index++
        this.stop = true
      }
    },
    // 停止答题
    stopanswer () {
      if (this.intervalid != null) {
        this.isclick = true
        clearInterval(this.intervalid)
        clearInterval(this.timer)
        this.intervalid = null
      }
      // this.count = 10
    },
    // 将10进制转为16进制
    tranlate (count) {
      if (parseInt(count) >= 16) {
        return (parseInt(count).toString(16))
      } else if (parseInt(count) === 0) {
        return ('00')
      } else {
        return ('0' + parseInt(count).toString(16))
      }
    },
    /**
 *@desc  开启倒计时
 *@param  rightItems      [int]  倒计时开始的大小
 *@param  totalItems  [int]  倒计时开始的总大小
 */
    startCount (rightItems = 500, totalItems = 500) {
      let that = this
      let copyRightItems = 0
      that.timer = setInterval(function () {
        copyRightItems++
        if (copyRightItems === rightItems) {
          clearInterval(that.timer)
        } else if (!that.isClick) {
          // 页面渲染完成
          // 这部分是灰色底层
          let cxtArc = wx.createCanvasContext('canvasArc')// 创建并返回绘图上下文context对象。
          cxtArc.setLineWidth(6)// 绘线的宽度
          cxtArc.setStrokeStyle('#d2d2d2')// 绘线的颜色
          cxtArc.setLineCap('round')// 线条端点样式
          cxtArc.beginPath()// 开始一个新的路径
          cxtArc.arc(30, 30, 25, 2 * Math.PI, 0, false)// 设置一个原点(53,53)，半径为50的圆的路径到当前路径
          cxtArc.stroke()// 对当前路径进行描边
          // 这部分是蓝色部分
          cxtArc.setLineWidth(6)
          cxtArc.setStrokeStyle('#008CBA')
          cxtArc.setLineCap('round')
          cxtArc.beginPath()// 开始一个新的路径
          cxtArc.arc(30, 30, 25, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, -Math.PI * 1 / 2, false)
          cxtArc.stroke()// 对当前路径进行描边
          cxtArc.draw()
        }
      }, 20)
    }
  },
  onHide () {
    if (this.intervalid != null) {
      clearInterval(this.intervalid)
    }
  }
}
</script>
<style lang='scss' scoped>
@import "/style";
 ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.background {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://img1.imgtn.bdimg.com/it/u=1154835176,526971167&fm=26&gp=0.jpg);
  background-repeat:no-repeat;
  background-position:center;
  background-size: 100% 100%;

}
.flex-container1 {
  display: flex;
  margin-top: 20%;
  width: 100%;
  height: 8%;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  opacity: 0.7;
  border-radius:20px 20px 0px 0px;

}
.flex-container2 {
  display: flex;
  width: 100%;
  height: 6%;
  background-color: #000000;
  opacity: 0.7;
  border-radius:0px 0px 20px 20px;

}
.flex-container3 {
  display: flex;
  margin-top: 1%;
  width: 100%;
  height: 30%;
  background-color: #000000;
  opacity: 0.8;
  justify-content: center;
  border-radius:15px 15px 0px 0px;
}
.flex-container4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 55%;
  background-color: #000000;
  opacity: 0.8;
}
.flex-item1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 35%;
  height: 100%;
  word-wrap: break-word;
  overflow: auto;
}
.flex-item11 {
  display: flex;
  align-items: center;
  width: 20%;
  height: 100%;
  overflow: auto;
}
.flex-item111 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  width: 35%;
  height: 100%;
  word-wrap: break-word;
  overflow: auto;
}
.flex-item2 {
  display: flex;
  align-content: center;
  justify-items: center;
  justify-content: center;
  align-items: center;
  margin-left: 5%;
  width: 35%;
  height: 100%;
  flex-direction: row;
}
.flex-item3 {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-items: center;
  justify-content: center;
  align-items: center;
  width: 35%;
  height: 100%;
  margin-left: 20%;
}
.imge {
  display: flex;
  margin-left: 3%;
  margin-right: 3%;
  align-items: center;
  height: 80%;
  width: 30%;
  border-radius: 50%;
}
.font {
  display: flex;
  justify-content: center;
  color: #fff;
  width: 63%;
  height: 80%;
  font-size: 18px;
  text-shadow: 5px 5px 5px rgb(32, 31, 31);
  overflow: auto;
}
.font1 {
  color: #fff;
  font-size: 20px;
  text-shadow: 5px 5px 5px rgb(32, 31, 31);
  overflow: auto;
}
.label {
display: flex;
align-items: center;
align-content: center;
margin-left: 10%;
margin-right: 10%;
font-size: 23px;
overflow-wrap: normal;
justify-content: center;
line-height: 110%;
overflow: auto;
color: #fff;
}
.btn {
  display: flex;
  align-items: center;
  overflow-wrap: break-word;
  justify-content: center;
  width: 50%;
  height: 54px;
  margin-top: 6%;
  color: rgb(0, 0, 0);
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  line-height: 100%;
}
.btncorrect {
  background-color:rgb(82, 192, 82);
}
.btnerror {
  background-color: red;
}
.yellow{
  background-color: yellow
}
.cir {
  display: inline-block;
  position: absolute;
  top:10%;
  left: 40%;
  border-radius: 100%;
}
.centerWord {
  width: 100%;
  position: absolute;
  top: 13%;
  text-align: center;
  color: #fdfdfd;
}
.player1img {
  position: absolute;
  top: 20%;
  left: 0%;
  height: 60%;
  width: 16%;
  border-radius: 50%;
}
.player2img {
  position: absolute;
  top: 20%;
  right: 0%;
  height: 60%;
  width: 16%;
  border-radius: 50%;
}
.answer {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
overflow: scroll;
width: 80%;
height: 100%;
font-size: 18px;
letter-spacing: 2px;
line-height: 1.1;
}

</style>
